<template>
  <div class="admin-bookings">
    <el-header class="header">
      <div class="header-content">
        <div class="logo">
          <h2>🏃‍♂️ 健身活动管理系统</h2>
        </div>
        <div class="nav">
          <el-button @click="$router.push('/admin/dashboard')" type="primary">仪表板</el-button>
          <el-button @click="$router.push('/admin/activities')">活动管理</el-button>
          <el-button @click="$router.push('/admin/users')">用户管理</el-button>
          <el-button @click="logout" type="danger">退出登录</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="main-content">
      <el-card class="bookings-card">
        <template #header>
          <div class="card-header">
            <span>📋 预约管理</span>
          </div>
        </template>

        <el-table :data="bookings" style="width: 100%">
          <el-table-column prop="id" label="预约ID" width="100" />
          <el-table-column prop="userId" label="用户ID" width="100" />
          <el-table-column prop="activityId" label="活动ID" width="100" />
          <el-table-column prop="bookingTime" label="预约时间" width="180">
            <template #default="scope">
              {{ formatTime(scope.row.bookingTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="paymentStatus" label="支付状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.paymentStatus === 1 ? 'success' : 'warning'">
                {{ scope.row.paymentStatus === 1 ? '已支付' : '未支付' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="金额" width="100">
            <template #default="scope">
              ¥{{ scope.row.amount }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" @click="confirmBooking(scope.row.id)" v-if="scope.row.status === 1">
                确认
              </el-button>
              <el-button size="small" type="danger" @click="cancelBooking(scope.row.id)">
                取消
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { bookingApi } from '@/api'
import dayjs from 'dayjs'

const router = useRouter()
const bookings = ref([])

const loadBookings = async () => {
  try {
    // 这里应该调用获取所有预约的接口，暂时使用模拟数据
    bookings.value = [
      {
        id: 1,
        userId: 8,
        activityId: 5,
        bookingTime: new Date(),
        status: 1,
        paymentStatus: 1,
        amount: 100.00
      },
      {
        id: 2,
        userId: 9,
        activityId: 6,
        bookingTime: new Date(),
        status: 2,
        paymentStatus: 0,
        amount: 90.00
      }
    ]
  } catch (error) {
    console.error('加载预约列表失败:', error)
    ElMessage.error('加载预约列表失败')
  }
}

const confirmBooking = async (id) => {
  try {
    await ElMessageBox.confirm('确认这个预约吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await bookingApi.confirmBooking(id)
    ElMessage.success('预约确认成功')
    loadBookings()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('确认预约失败:', error)
    }
  }
}

const cancelBooking = async (id) => {
  try {
    await ElMessageBox.confirm('确定要取消这个预约吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await bookingApi.cancelBooking(id)
    ElMessage.success('预约取消成功')
    loadBookings()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消预约失败:', error)
    }
  }
}

const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  ElMessage.success('退出登录成功')
  router.push('/login')
}

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

const getStatusType = (status) => {
  const statusMap = {
    1: 'warning',
    2: 'success',
    3: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    1: '已预约',
    2: '已确认',
    3: '已取消'
  }
  return statusMap[status] || '未知'
}

onMounted(() => {
  loadBookings()
})
</script>

<style scoped>
.admin-bookings {
  min-height: 100vh;
  background: #f5f7fa;
}

.header {
  background: white;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo h2 {
  margin: 0;
  color: #333;
}

.nav .el-button {
  margin-left: 10px;
}

.main-content {
  padding: 20px;
}

.bookings-card {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 